<template>
	<el-dialog :visible.sync="addBottleShow" class="bottoleDialog" :close-on-click-modal="false" @close="$emit('update:showAddBottle',false)"
	 width="65%" :show-close='false' :append-to-body='true'>

		<span slot="title" class="dialog-title">
		  	设置采样要求
			<el-button  size="mini" class="popupClose" @click="resetAddBottleForm">关闭</el-button>
			  </span>

		<el-form label-width="110px" :inline="false" style="height:60px;margin-top:20px" class="demo-form-inline" :model="addBottleForm" :rules="addBottleRules" ref="sampleForm">

			<el-form-item label="采样人" >
				<el-col :span="22">
					<el-select filterable v-model="addBottleForm.collectionMan" placeholder="请选择" size='mini'>
						<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>

			<el-form-item label="现场负责人">
				<el-col :span="22">
					<el-select filterable v-model="addBottleForm.collectionLeader" placeholder="请选择" size='mini'>
						<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>
		</el-form>

		<!--<div style="height:30px;line-height:30px;margin-bottom:5px;">
				<span style = "float:left">推荐容器：{{bottleData}}</span>
				<el-button type="primary" size="mini" @click="addone" style = "float:right;vitival">增加</el-button>
		</div>
		<el-table size="mini" highlight-current-row :data="meterialList" class="tableCon" style="width: 100%;height:calc(100% - 100px)">
			<el-table-column prop="rongqileixing" label="容器材质" min-width="180">
				<template slot-scope="scope">
					<el-select v-model="scope.row.bottleType" placeholder="请选择" @change="bottleChange(scope.row)" size="mini">
						<el-option v-for="item in bottleOptions" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="rongqileixing" label="容器容量(ml)" min-width="180">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.capacity" :step="100" :min="0" size="mini"></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="pingshu" label="采样瓶数" min-width="180">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.number" :min="1" :max="10" size="mini"></el-input-number>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" :key="Math.random()" min-width="100">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="deleteone(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>-->

		<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="doEdit" size="mini">确 定</el-button>
			    <el-button  size="mini" @click="resetAddBottleForm">取 消</el-button>
			  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		props: ['newOrEdit', 'canEdit', 'showAddBottle', 'selectedArr', 'newTaskMeterialList', 'bottleData'],
		data() {
			return {
				meterialList: [],
				addBottleForm: {
					collectionMan: null,
					collectionLeader: null,
				},
				yesornoValue: '1',
				enableStatusValue: '1',
				caiyangData: [
					{
						rongqileixing: '',
						pingshu: '',
					}
				],
				addBottleRules: {},
				popupPenalStyle: {
					// height:(window.innerHeight - 500)+'px',
					'min-height': '500px',
					//      'top': '300px'
				},
				penalContentStyle: {
					'height': (window.innerHeight - 400) + 'px'
				},
				rongqirongliang: [
					{
						value: '000',
						label: '200ml'
					},
					{
						value: '001',
						label: '500ml'
					},
					{
						value: '002',
						label: '1000ml'
					},
					{
						value: '003',
						label: '2000ml'
					}
				]
			}
		},
		computed: {
			...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'bottleType', 'caiyangrenData', 'EmployeeByLabs','tableHeightC','bottleOptions']),
			addBottleShow: {
				get: function () {

					return this.showAddBottle
				},
				set: function (newValue) {

				}
			}

		},
		mounted() {
			this.$store.dispatch("getAllBottles");
			this.meterialList = this.newTaskMeterialList
		},
		methods: {

			bottleChange(row) {
				let filterArr = [];
				filterArr = this.bottleOptions.filter(item => item.id == row.bottleType)
				row.bottleName = filterArr[0].name
			},
			addone() {
				this.meterialList.push({
					bottleType: '',
					capacity: 100,
					number: null
				})
			},
			resetAddBottleForm() {
				this.addBottleForm = {
					collectionMan: '',
					collectionLeader: ''
				};
				this.meterialList = [];
				this.$emit('update:showAddBottle', false)
			},
			formatName(value) {
				let filterArr = [];
				filterArr = this.EmployeeByLabs.filter(item => item.account === value)
				if (filterArr.length != 0) {
					return filterArr[0].name
				}
			},
			doEdit() {
				console.log(this.selectedArr)
				for (let i of this.selectedArr) {
					this.$set(i, 'collectionLeader', this.addBottleForm.collectionLeader)
					this.$set(i, 'collectionLeaderName', this.formatName(this.addBottleForm.collectionLeader))
					this.$set(i, 'collectionMan', this.addBottleForm.collectionMan)
					this.$set(i, 'collectionManName', this.formatName(this.addBottleForm.collectionMan))
					this.$set(i, 'detailBeans', this.meterialList)

				}
				console.log(this.selectedArr)
				this.resetAddBottleForm();
			}
		}
	}

</script>

<style>
	.bottoleDialog .el-dialog {
		height: 70%;
	}
	.bottoleDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}
	.bottoleDialog .el-dialog .el-dialog__body .el-form-item{ 
		width:48%;
		float:left;
		margin-bottom: 10px;
	}

	

</style>